<template>
  <div style="padding:15px">
    <div class="searchHeader">
      <span>任课老师</span>
      <div class="searchArea">
        <el-form class="chooseTeacherForm" :inline="true" label-width="80px">
          <el-form-item label="所属院系">
            <el-select
              v-model="departmentId"
              placeholder="请选择院系"
              size="small"
            >
              <el-option
                v-for="item in departmentList"
                :key="item.departmentId"
                :label="item.departmentName"
                :value="item.departmentId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              size="small"
              style="margin-left:20px;background-color: rgb(51, 55, 68);
                  color: white;
                  border: 0;"
              @click="submit"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <el-form class="chooseTeacherForm" :inline="true" label-width="80px">
          <el-form-item label="已选教师">
            <el-input size="small" v-model="selectedTeacher" placeholder="无"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div>
      <div class="tableMain">
        <el-table
          :data="tableShowitem"
          stripe
          :header-cell-style="{
            background: '#B6C4D3',
            color: '#1A1C1E',
            padding: '0',
          }"
          :header-row-style="{ height: '35px' }"
          :row-style="{ height: '25px' }"
          :cell-style="{ padding: '2px' }"
        >
          <el-table-column prop="teacherId" label="工号" fit />
          <el-table-column prop="name" label="姓名" fit />
          <!-- <el-table-column prop="departmentName" label="所属院系" fit /> -->
          <el-table-column prop="academicTitle" label="职称" fit />
          <el-table-column fixed="right" label="操作" fit>
            <template slot-scope="scope">
              <el-button @click.native.prevent="choose(scope.row)" type="text">
                选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="padding:19px">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="selectTeacher.length"
          style="text-align: center; margin-top:10px"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedTeacher: "",
      teacherId: null,
      selectTeacher: [
        // {
        //   departmentName: "软件学院",
        //   teacherId: "100000111",
        //   phoneNumber: "13500000000",
        //   name: "王二",
        //   male: "女",
        //   academicTitle: "教授",
        // },
      ],
      departmentId: "",
      departmentList: [],
      //处理页数
      currentPage: 1, // 当前页数
      pageSize: 6, // 表的行数
      tableShowitem: [],
    };
  },
  computed: {},
  methods: {
    //教师搜索
    submit() {
      let options = {
        teacherId: null,
        name: null,
        departmentId: this.departmentId,
        academicTitle: null,
      };
      this.$http.post(this.$api.TeacherSearchInfo, options).then((resp) => {
        if (resp.success) {
          this.selectTeacher = resp.data;
          this.handleCurrentChange(1);
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    // 在表格一行中选择一个老师
    choose(item) {
      this.teacherId = item.teacherId;
      this.selectedTeacher =
        item.teacherId + " / " + item.name + " / " + item.academicTitle;
    },
    //返回院系列表
    returnDepartment() {
      this.$http.get(this.$api.InfoDepartment).then((resp) => {
        if (resp.success) {
          this.departmentList = resp.data;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //处理页数的改变
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.tableShowitem = this.selectTeacher.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  mounted() {
    this.returnDepartment();
    // 挂载时载入当前学生数，看情况要不要
    this.handleCurrentChange(this.currentPage);
    // console.log(this.tableShowitem);
  },
};
</script>

<style scoped>

.el-select {
  width: 220px;
}

.searchHeader {
  text-align: center;
}

.chooseTeacherForm {
  width: 400px;
  height: 50px;
  margin: auto;
  text-align: left;
  padding-left: 0;
}
.chooseTeacherForm .el-input {
  width: 220px;
}

.searchHeader {
  text-align: center;
}

.tableMain {
  height: 280px;
}
</style>
